<template>
	<div class="main">
		<el-tabs v-model="activeName">
			<el-tab-pane label="基本信息" name="first">
				<el-form :model="baseInfo" label-width="150px">
					<el-form-item label="商家联系人姓名:">
						<span>{{baseInfo.merchantContactsName}}</span>
					</el-form-item>
					<el-form-item label="商家联系人手机号码:">
						<span>{{baseInfo.merchantContactsTel}}</span>
					</el-form-item>
					<el-form-item label="商家电子邮箱:">
						<span>{{baseInfo.merchantEmail}}</span>
					</el-form-item>
					<el-form-item label="商家电话:">
						<span>{{baseInfo.merchantTel}}</span>
					</el-form-item>
					<el-form-item label="商家全称:">
						<span>{{baseInfo.merchantName}}</span>
					</el-form-item>
					<el-form-item label="商家名字简称:">
						<span>{{baseInfo.merchantShortName}}</span>
					</el-form-item>
					<el-form-item label="主体类型:">
						<span>{{baseInfo.organizationType}}</span>
					</el-form-item>
				</el-form>
			</el-tab-pane>

			<el-tab-pane label="营业执照及法人信息" name="second">
				<el-form :model="baseInfo" label-width="220px" v-if="baseInfo.idCardValidTime">
					<el-form-item label="法定/代表人身份证号">
						<span>{{baseInfo.legalPersonIdCard}}</span>
					</el-form-item>
					<el-form-item label="法定/代表人姓名">
						<span>{{baseInfo.legalPerson}}</span>
					</el-form-item>
					<el-form-item label="商户统一社会信用代码">
						<span>{{baseInfo.businessLicenseNumber}}</span>
					</el-form-item>
					<el-form-item label="注册地址">
						<span>{{baseInfo.companyAddress}}</span>
					</el-form-item>
					<el-form-item label="法定/代表人身份证有效期">
						<span>{{baseInfo.idCardValidTime[0]}} 至 {{baseInfo.idCardValidTime[1]}}</span>
					</el-form-item>
					<el-form-item label="营业执照有效期">
						<span>{{baseInfo.businessTime[0]}} 至 {{baseInfo.businessTime[1]}}</span>
					</el-form-item>
				</el-form>
			</el-tab-pane>
			<el-tab-pane label="商户证照" name="third">
				<el-form :model="baseInfo" inline label-width="160px" v-if="baseInfo.idCardPersonalImage">
					<el-form-item label="法人身份证正面照">
						<el-image class="images" :src="baseInfo.idCardPersonalImage.url"
							@click="seeImages(baseInfo.idCardPersonalImage.url)" :preview-src-list="srcList"></el-image>
					</el-form-item>
					<el-form-item label="法人身份证反面照">
						<el-image class="images" :src="baseInfo.idCardNationalImage.url"
							@click="seeImages(baseInfo.idCardNationalImage.url)" :preview-src-list="srcList"></el-image>
					</el-form-item>
					<el-form-item label="营业执照(三证合一码)">
						<el-image class="images" :src="baseInfo.businessLicenseImage.url"
							@click="seeImages(baseInfo.businessLicenseImage.url)" :preview-src-list="srcList">
						</el-image>
					</el-form-item>
					<el-form-item label="商户门头照">
						<el-image class="images" :src="baseInfo.merchantImage.url"
							@click="seeImages(baseInfo.merchantImage.url)" :preview-src-list="srcList"></el-image>
					</el-form-item>
				</el-form>
			</el-tab-pane>
			<el-tab-pane label="绑卡/结算绑定信息" name="fourth">
				<el-form :model="baseInfo" label-width="200px">
					<el-form-item label="开户银行">
						<span>{{baseInfo.accountBank}}</span>
					</el-form-item>
					<el-form-item label="开户名称">
						<span>{{baseInfo.accountName}}</span>
					</el-form-item>
					<el-form-item label="银行帐号">
						<span>{{baseInfo.accountNumber}}</span>
					</el-form-item>
					<el-form-item label="开户银行全称 （含支行)">
						<span>{{baseInfo.bankName}}</span>
					</el-form-item>
					<el-form-item label="开户银行省市编码">
						<span>{{baseInfo.bankAddressCode}}</span>
					</el-form-item>
				</el-form>
			</el-tab-pane>
			<el-tab-pane label="支付渠道" name="five">
				<el-tabs tab-position="left" style="height: 600px;">
					<el-tab-pane :label="item.description" v-for="(item,index) in baseInfo.payChannels" :key="index">
						<div style="padding: 0 15px;" v-show="!yinhangkaStatus">
							<span style="font-size:14px;margin-right: 15px;">{{STATUSCODE[item.statusCode]}}</span>
							<el-button @click="kaitong(item)" type="text"
								v-show="item.statusCode==0||item.statusCode==2">
								{{item.statusCode==0?'前往开通':item.statusCode==2?'前往编辑':''}}
							</el-button>
								
							<el-button @click="bankviewhandle" type="text"
								v-show="item.statusCode==3&&item.payChannel=='wx-online'">查看银行卡信息</el-button>
								
							<el-button @click="yinhangka(item)" type="text"
								v-show="item.statusCode==3&&item.payChannel=='wx-online'">修改银行卡信息</el-button>
							<div v-if="status">
								<div style="margin-top: 25px;">
									<el-form :model="payChannels" label-width="200px">
										<el-form-item label="付款户名" v-if="payChannels.accountName!=null">
											<span>{{payChannels.accountName}}</span>
										</el-form-item>
										<el-form-item label="付款卡号" v-if="payChannels.accountNo!=null">
											<span>{{payChannels.accountNo}}</span>
										</el-form-item>
										<el-form-item label="申请状态" v-if="payChannels.applymentState!=null">
											<span>{{ApplymentState[payChannels.applymentState]}}</span>
										</el-form-item>
										<el-form-item label="驳回原因详情" v-if="payChannels.auditDetail!=null">
											<span>{{payChannels.auditDetail}}</span>
										</el-form-item>
										<el-form-item label="汇款截止时间" v-if="payChannels.deadline!=null">
											<span>{{payChannels.deadline}}</span>
										</el-form-item>
										<el-form-item label="收款账户的开户银行名称" v-if="payChannels.destinationAccountBank!=null">
											<span>{{payChannels.destinationAccountBank}}</span>
										</el-form-item>
										<el-form-item label="收款账户的省市" v-if="payChannels.destinationAccountBankCity!=null">
											<span>{{payChannels.destinationAccountBankCity}}</span>
										</el-form-item>
										<el-form-item label="收款户名" v-if="payChannels.destinationAccountName!=null">
											<span>{{payChannels.destinationAccountName}}</span>
										</el-form-item>
										<el-form-item label="收款卡号" v-if="payChannels.destinationAccountNumber!=null">
											<span>{{payChannels.destinationAccountNumber}}</span>
										</el-form-item>
										<el-form-item label="法人验证链接" v-if="payChannels.legalValidationUrl!=null">
											<qriously :value="payChannels.legalValidationUrl" :size="200" />
											<span style="font-size: 13px;color: red;">*扫码二维码验证完成后手动查询状态</span>
										</el-form-item>
										<el-form-item label="汇款金额,单位(分)" v-if="payChannels.payAmount!=null">
											<span>{{payChannels.payAmount}}</span>
										</el-form-item>
										<el-form-item label="备注信息" v-if="payChannels.remark!=null">
											<span>{{payChannels.remark}}</span>
										</el-form-item>
										<el-form-item label="签约状态" v-if="payChannels.signState!=null">
											<span>{{SIGNSTATE[payChannels.signState]}}</span>
										</el-form-item>
										<el-form-item label="签约链接" v-if="payChannels.signUrl!=null">
											<qriously :value="payChannels.signUrl" :size="200" />
											<span style="font-size: 13px;color: red;">*扫码二维码验证完成后手动查询状态</span>
										</el-form-item>
									</el-form>
								</div>
							</div>
						</div>
					
						<div class="yinhangka" v-show="yinhangkaStatus">
							<el-button type="primary" @click="back()">返回</el-button>
							<div style="margin-top: 25px;">
								<el-form :model="ruleForm" label-width="160px">
									<el-form-item label="开户银行" prop="accountBank">
										<el-autocomplete style="width: 360px;" v-model="ruleForm.accountBank"
											:fetch-suggestions="querySearch" placeholder="请输入开户银行,例如:中国银行"  clearable></el-autocomplete>
									</el-form-item>
									<el-form-item label="开户名称" prop="accountName">
									    <el-input v-model="ruleForm.accountName" placeholder="例如:张三" clearable style="width: 360px;"></el-input>
										<div style="font-size: 12px;color: red;">*对公为营业执照企业名称,个人银行卡则为法人名字</div>
									</el-form-item>
									<el-form-item label="银行帐号" prop="accountNumber">
									    <el-input v-model="ruleForm.accountNumber" placeholder="例如:6121121219212812" clearable style="width: 360px;"></el-input>
									</el-form-item>
									<el-form-item label="开户银行省市编码" prop="bankAddressCode">
										<el-cascader :props="{'value':'regionCode','label':'regionName'}" v-model="proives"
											:options="proivce" @change="proivceHandleChange" clearable></el-cascader>
										<el-cascader :props="{'value':'regionCode','label':'regionName'}" v-model="citys"
											:options="city" @change="cityHandleChange" clearable style="margin:0 10px"></el-cascader>
										<el-cascader :props="{'value':'regionCode','label':'regionName'}" v-model="areas"
											:options="area" clearable></el-cascader>
									</el-form-item>
									<el-form-item label="开户银行全称(含支行)" prop="bankBranchId">
										<el-select v-model="ruleForm.bankBranchId" :remote-method="remoteMethod" :loading="loading"
											remote filterable placeholder="例如:中国建设银行股份有限公司成都南延线分理处" clearable style="width: 360px;">
											<el-option v-for="item in options" :key="item.bankBranchId" :label="item.bankName"
												:value="item.bankBranchId">
											</el-option>
										</el-select>
									</el-form-item>
									<el-form-item>
									    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
									</el-form-item>
								</el-form>
							</div>
						</div>
					</el-tab-pane>
				</el-tabs>
				
			</el-tab-pane>
			
			<el-tab-pane label="基本配置信息" name="six">
				<el-form label-width="120px">
					<el-form-item label="商品位数量">
						<span>{{baseInfo.positionNum}}</span>
					</el-form-item>
					<el-form-item label="现金手续费比例">
						<span>{{baseInfo.cashServiceRatio}}%</span>
					</el-form-item>
					<el-form-item label="糖果手续费比例">
						<span>{{baseInfo.sweetServiceRatio}}%</span>
					</el-form-item>
				</el-form>
			</el-tab-pane>
		</el-tabs>
		<el-dialog :visible.sync="dialogVisible">
			<img width="100%" :src="dialogImageUrl" alt="">
		</el-dialog>
		<el-dialog :visible.sync="bankview">
			<el-form  label-width="160px">
				<el-form-item label="开户银行:">
					<span>{{bankinfoData.accountBank}}</span>
				</el-form-item>
				<el-form-item label="银行帐号:">
					<span>{{bankinfoData.accountNumber}}</span>
				</el-form-item>
				<el-form-item label="账户类型:">
					<span>{{ACCOUNTTYPE[bankinfoData.accountType]}}</span>
				</el-form-item>
				<el-form-item label="开户银行全称(含支行):">
					<span>{{bankinfoData.bankName}}</span>
				</el-form-item>
				<el-form-item label="汇款验证失败原因:">
					<span>{{bankinfoData.verifyFailReason}}</span>
				</el-form-item>
				<el-form-item label="验证结果:">
					<span>{{bankinfoData.verifyResult}}</span>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				ACCOUNTTYPE:{
					ACCOUNT_TYPE_BUSINESS:'对公银行账户',
					ACCOUNT_TYPE_PRIVATE:'经营者个人行卡'
				},
				bankinfoData:'',
				bankview:false,
				yinhangkaStatus: false,
				ruleForm: {
					accountBank:'',
					accountName:'',
					accountNumber:'',
					bankAddressCode:'',
					bankBranchId:''
				},
				options: '',
				loading: false,
				baseInfo: {},
				activeName: 'first',
				srcList: [],
				certificateImg: [],
				otherImgList: [],
				dialogVisible: false,
				dialogImageUrl: '',
				payChannel: '',
				payChannels: '',
				status: false,
				ApplymentState: {
					CHECKING: '资料校验中',
					ACCOUNT_NEED_VERIFY: '待账户验证',
					AUDITING: '审核中',
					REJECTED: '已驳回',
					NEED_SIGN: '待签约',
					FINISH: '完成',
					FROZEN: '已冻结'
				},
				SIGNSTATE: {
					UNSIGNED: '未签约',
					SIGNED: '已签约',
					NOT_SIGNABLE: '不可签约'
				},
				STATUSCODE: {
					0: '未开通',
					1: '申请中',
					2: '审核未通过',
					3: '已开通',
					4: '异常'
				},
				parent_code: '',
				proives: '',
				citys: '',
				areas: '',
				proivce: [],
				city: [],
				area: [],
				restaurants:[
					{"value": "工商银行"},
					{"value": "交通银行"},
					{"value": "招商银行"},
					{"value": "民生银行"},
					{"value": "中信银行"},
					{"value": "浦发银行"},
					{"value": "兴业银行"},
					{"value": "光大银行"},
					{"value": "广发银行"},
					{"value": "平安银行"},
					{"value": "北京银行"},
					{"value": "华夏银行"},
					{"value": "农业银行"},
					{"value": "建设银行"},
					{"value": "邮政储蓄银行"},
					{"value": "中国银行"},
					{"value": "宁波银行"}
				],
				
			}
		},
		mounted() {
			if(this.$route.query.token){
				localStorage.setItem('token',this.$route.query.token);
			}
			this.getData();
			this.getBank();
			this.getCity();
		},
		methods: {
			back(){
				this.yinhangkaStatus = false;
			},
			bankviewhandle(){
				this.$http.get(this.$api.wxOnlineBankGet).then(res=>{
					this.bankinfoData = res.data;
					this.bankview = true;
				})
			},
			submitForm(formName) {
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.ruleForm.bankAddressCode = this.areas[0] ? this.areas[0].split(',')[0] : this.citys[0] ? this.citys[0]
					.split(',')[0] : this.proives[0] ? this.proives[0].split(',')[0] : '';
				console.log(this.$refs[formName])
				this.$http.post(this.$api.wxOnlineBank, this.ruleForm).then(res => {
					if (res.code == 0) {
						this.$http.post(this.$api.secUpdate + '/wx-online').then(res => {
							if (res.code == 0) {
								this.$message({
									type: 'success',
									message: '修改成功！'
								});
								this.yinhangkaStatus = false;
							} else {
								this.$message({
									type: 'error',
									duration: 0,
									showClose: true,
									message: res.msg
								});
							}
						})
					} else {
						this.$message({
							type: 'error',
							duration: 0,
							showClose: true,
							message: res.msg
						});
					}
					loading.close();
				})
			},
			querySearch(queryString, cb) {
				var restaurants = this.restaurants;
				var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
				// 调用 callback 返回建议列表的数据
				cb(results);
			},
			createFilter(queryString) {
				return (restaurant) => {
					return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
				};
			},
			getCity() {
				this.$http.get(this.$api.city, {
					parent_code: this.parent_code
				}).then(res => {
					this.proivce = res.data;
				})
			},
			proivceHandleChange(val) {
				this.city = [];
				this.area = []
				this.$http.get(this.$api.city, {
					parent_code: val[0]
				}).then(res => {
					this.city = res.data;
				})
			},
			cityHandleChange(val) {
				this.area = []
				this.$http.get(this.$api.city, {
					parent_code: val[0]
				}).then(res => {
					this.area = res.data;
			
				})
			},
			remoteMethod(query) {
				if (query !== '') {
					this.loading = true;
					setTimeout(() => {
						this.loading = false;
						this.content = query;
						this.getBank();
					}, 200);
				} else {
					this.options = [];
				}
			},
			getBank() {
				this.$http.get(this.$api.bankList, {
					content: this.content,
					page: 1,
					size: 300
				}).then(res => {
					if (res.code == 0) {
						this.options = res.data.list;
					}
				})
			},
			getData() {
				const loading = this.$loading({
					lock: true,
					text: '数据加载中。。。',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$http.get(this.$api.baseInfo).then(res => {
					if (res.code == 0) {
						res.data.payChannels.forEach(item=>{
							if(item.statusCode == 1 && item.payChannel == "wx-online"){
								this.getPayChannel(item.payChannel);
							}
						})
						this.baseInfo = res.data;
						localStorage.setItem('merchantId', res.data.merchantId);
						localStorage.setItem('merName', res.data.merchantName);
						localStorage.setItem('mobile', res.data.merchantTel)
					}
					loading.close();
				})
			},
			seeImages(url) {
				this.srcList = [];
				this.srcList.push(url)
			},
			handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			},
			kaitong(item) {
				if (item.statusCode == 0 && item.payChannel == "wx-online") {
					//statusCode==0:未开通
					this.$router.push({
						path: 'wechatPay',
						params: {
							type: item.statusCode
						}
					})
				} else if (item.statusCode == 0 && item.payChannel == "wx-underline") {

				} else if (item.statusCode == 0 && item.payChannel == "adapay-online") {

				} else if (item.statusCode == 1 && item.payChannel == "wx-online") {
					this.getPayChannel(item.payChannel);
					//statusCode==1:申请中
				} else if (item.statusCode == 1 && item.payChannel == "wx-underline") {

				} else if (item.statusCode == 1 && item.payChannel == "adapay-online") {

				} else if (item.statusCode == 2 && item.payChannel == "wx-online") {
					//statusCode==2:审核未通过
					this.$router.push({
						path: 'wechatPay',
						query: {
							type: item.statusCode
						}
					})
				} else if (item.statusCode == 2 && item.payChannel == "wx-underline") {

				} else if (item.statusCode == 2 && item.payChannel == "adapay-online") {

				} else if (item.statusCode == 3 && item.payChannel == "wx-online") {
					//statusCode==3:已开通
					this.$message({
						message: item.description + '已开通',
						type: 'success'
					});
				} else if (item.statusCode == 3 && item.payChannel == "wx-underline") {
					this.$message({
						message: item.description + '已开通',
						type: 'success'
					});
				} else if (item.statusCode == 3 && item.payChannel == "adapay-online") {
					this.$message({
						message: item.description + '已开通',
						type: 'success'
					});
				} else if (item.statusCode == 4 && item.payChannel == "wx-online") {
					//statusCode==4:异常
					this.$message({
						message: item.description + '异常',
						type: 'danger'
					});
				} else if (item.statusCode == 4 && item.payChannel == "wx-underline") {
					this.$message({
						message: item.description + '异常',
						type: 'danger'
					});
				} else if (item.statusCode == 4 && item.payChannel == "adapay-online") {
					this.$message({
						message: item.description + '异常',
						type: 'danger'
					});
				}
			},
			yinhangka(item) {
				this.yinhangkaStatus = true;
			},
			getPayChannel(val) {
				this.$http.get(this.$api.payChannel + '/' + val).then(res => {
					if (res.code == 0) {
						this.payChannels = res.data;
						console.log(this.payChannels)
						this.status = true;
					} else {
						this.payChannels = null;
						this.status = true;
					}
				})
			}
		}
	}
</script>

<style scoped>
	.main {
		padding: 15px;
		color: #434448;
	}

	>>>.el-icon-circle-close {
		color: red;
	}

	.images {
		width: 280px;
		height: 160px;
		border-radius: 5px;
	}

	.avatar-small {
		width: 150px;
		height: 80px;
		display: block;
		border-radius: 5px;
	}
</style>
